<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-descriptions title="甲方信息">
        <a-descriptions-item label="商户名称">{{ custContractDtl?.merchantName ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="联系人">{{ custContractDtl?.merchantContactName ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="联系人手机号">{{
          custContractDtl?.merchantContactMobile ?? '—'
        }}</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
      <a-descriptions title="乙方信息">
        <a-descriptions-item label="客户姓名">{{ custContractDtl?.userName ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="手机号码">{{ custContractDtl?.userMobile ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="身份证号码">{{ custContractDtl?.userNetsignAccount ?? '—' }}</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
      <a-descriptions title="价格信息">
        <a-descriptions-item label="合同金额">{{
          custContractDtl?.contractAmount ?? '—'
        }}元</a-descriptions-item>
        <a-descriptions-item label="定金">{{ custContractDtl?.depositAmount ?? '—' }}元</a-descriptions-item>
        <a-descriptions-item label="分期选择">{{
          custContractDtl?.repaymentCycle ?? '—'
        }}期</a-descriptions-item>
        <a-descriptions-item label="还款日">{{
          custContractDtl?.repaymentDay | repaymentDayFilter
        }}</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
      <a-descriptions title="合同信息">
        <a-descriptions-item label="合同编号">{{ custContractDtl?.contractNo ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="还款状态">{{
          custContractDtl?.repaymentStatus | repaymentStatusFilter
        }}</a-descriptions-item>
        <a-descriptions-item label="还款次数">{{ custContractDtl?.repaymentNums ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="逾期次数">{{ custContractDtl?.overdueNums ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="已还金额">{{
          custContractDtl?.repaymentAmount ?? '—'
        }}元</a-descriptions-item>
        <a-descriptions-item label="标记支付金额">{{
          custContractDtl?.markPayAmount ?? '—'
        }}元</a-descriptions-item>
        <a-descriptions-item label="下期还款时间">{{ custContractDtl?.nextRepaymentTime ?? '—' }}</a-descriptions-item>
        <a-descriptions-item label="下期还款金额">{{
          custContractDtl?.nextRepaymentAmount ?? '—'
        }}元</a-descriptions-item>
        <a-descriptions-item label="还款完结时间">{{
          custContractDtl?.repaymentCompleteTime ?? '—'
        }}</a-descriptions-item>
        <template v-if="custContractDtl?.capitalContractStatus !== 0">
          <a-descriptions-item label="配资状态">{{
            custContractDtl?.capitalContractStatus | capitalContractStatusFilter
          }}</a-descriptions-item>
          <a-descriptions-item label="配资合同编号">{{
            custContractDtl?.merchantContractNo ?? '—'
          }}</a-descriptions-item>
          <a-descriptions-item label="支付状态">{{ custContractDtl?.serviceFeePayStatus ?? '—' }}</a-descriptions-item>
          <a-descriptions-item label="服务费">{{
            ((custContractDtl?.serviceFeeAmount * 100) / custContractDtl?.contractAmount).toFixed(2)
          }}</a-descriptions-item>
        </template>
        <a-descriptions-item label="签约链接">{{ custContractDtl?.userNetsignUrl }}</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />

      <div class="title">账单列表</div>
      <a-table row-key="billName" :columns="columns" :data-source="custContractDtl.billList">
        <span slot="billType" slot-scope="text">{{ text === 1 ? '签约' : '还款' }}</span>
        <span slot="repaymentStatus" slot-scope="text">{{ text | repaymentStatus1Filter }}</span>
      </a-table>
      <a-divider style="margin-bottom: 32px" />
      <iframe width="100%" height="600" :src="custContractDtl?.userNetsignUrl"> </iframe>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getCustContractDtl } from '@/api/custContractManage'
export default {
  components: {
    STable
  },
  data () {
    return {
      merchantId: '',
      contractNums: '',
      curTempNo: '',
      custContractDtl: {},
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: '账单名称',
          dataIndex: 'billName',
          key: 'billName',
          align: 'center'
        },
        {
          title: '账单类型',
          dataIndex: 'billType',
          key: 'billType',
          scopedSlots: { customRender: 'billType' },
          align: 'center'
        },
        {
          title: '账单金额（单位：元）',
          dataIndex: 'repaymentAmount',
          key: 'repaymentAmount',
          align: 'center'
        },
        {
          title: '应还款时间',
          dataIndex: 'shouldRepaymentTime',
          key: 'shouldRepaymentTime',
          align: 'center'
        },
        {
          title: '实还款时间',
          dataIndex: 'actualRepaymentTime',
          key: 'actualRepaymentTime',
          align: 'center'
        },
        {
          title: '还款状态',
          dataIndex: 'repaymentStatus',
          key: 'repaymentStatus',
          scopedSlots: { customRender: 'repaymentStatus' },
          align: 'center'
        },
        {
          title: '资方分账金额',
          dataIndex: 'capitalAllocateAmount',
          key: 'capitalAllocateAmount',
          customRender: (text) => text ?? '—',
          align: 'center'
        }
      ]
    }
  },
  filters: {
    repaymentStatusFilter (text) {
      const repaymentStatusMap = {
        1: '正常',
        2: '逾期',
        3: '结清'
      }
      return repaymentStatusMap[text]
    },
    repaymentDayFilter (text) {
      const repaymentDayMap = {
        1: '次月今日',
        2: '次月5日',
        3: '次月15日',
        4: '次月25日',
        5: '一周后',
        6: '次月25日'
      }
      return repaymentDayMap[text]
    },
    capitalContractStatusFilter (text) {
      const capitalContractStatusMap = {
        0: '未打包',
        1: '已打包',
        2: '已结清',
        4: '已冻结'
      }
      return capitalContractStatusMap[text]
    },
    repaymentStatus1Filter (text) {
      const repaymentStatusMap = {
        0: '未到期',
        12: '逾期未付',
        21: '正常支付',
        22: '逾期支付',
        5: '已作废',
        6: '标记支付'
      }
      return repaymentStatusMap[text]
    }
  },
  computed: {
    title () {
      return this.$route.meta.title
    }
  },
  methods: {
    /**
     * 获取详情
     */
    getCustContractDtl () {
      getCustContractDtl({ contractNo: this.contractNo })
        .then((res) => {
          this.custContractDtl = res.result
        })
        .catch((e) => {})
    }
  },
  mounted () {
    const { contractNo } = this.$route.params
    this.contractNo = contractNo
    this.getCustContractDtl()
  }
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.contractNums {
  display: flex;
  align-items: center;
  .contractNums__lab {
    width: 60px;
    margin-right: 20px;
    text-align: right;
  }
  .contractNums__text {
    width: calc(100% -80px);
  }
}
</style>
